<meta charset="UTF-8">
<script src="jquery.js"></script>

<body>
    <div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
    <div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
    <div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
</body>

<script>
    var $divs = $("div");

    // 为每个div元素设置两个自定义动画
    $divs.animate( {width: 400, height: 200}, 1000 )
            .animate( {width: 200, height: 100 }, 1000 );

    var fx = $divs.queue(); // 相当于：var fx = $divs.queue("fx");
    document.writeln( fx.length ); // 2
    document.writeln( fx[0] + '<br>'); // "inprogress"(第一个动画函数已被移除并开始执行，所以在队列开头添加该字符串来表示，如果执行完成，将开始移除并执行第二个动画函数)
    document.writeln( fx[1] ); // 第二个动画的执行函数

    // 用一个空的数组替换当前动画队列，即可清空动画队列
    // 此时第一个动画函数已经从队列中移除、正在执行
    // 因此第一个动画函数执行完毕后，就不会执行第二个动画函数(被清空了)
    $divs.queue( [ ] );
</script>